<template>
  <div class="v-right-item">
    <!--navigation button-->
    <button type="button"
            v-if="toolbars.navigation"
            aria-hidden="true"
            :class="navigationClass"
            :title="navigationTitle"
            @click="clickToolbar('navigation')">
    </button>
    <!--preview button-->
    <button type="button"
            v-if="toolbars.preview"
            aria-hidden="true"
            :class="previewClass"
            :title="previewTitle"
            @click="clickToolbar('preview')">
    </button>
    <!--fullscreen button-->
    <button type="button"
            v-if="toolbars.fullscreen"
            aria-hidden="true"
            :class="fullscreenClass"
            :title="fullscreenTitle"
            @click="clickToolbar('fullscreen')">
    </button>
    <!--readmodel button-->
    <button type="button"
            v-if="toolbars.readmodel"
            aria-hidden="true"
            :class="readmodelClass"
            :title="readmodelTitle"
            @click="clickToolbar('read')">
    </button>
    <!--subfield button-->
    <button type="button"
            v-if="toolbars.subfield"
            aria-hidden="true"
            :class="subfieldClass"
            :title="subfieldTitle"
            @click="clickToolbar('subfield')">
    </button>
    <!--divide line-->
    <span v-if="hasDivide" class="op-icon-divider"></span>
    <!--htmlcode button-->
    <button type="button"
            v-if="toolbars.htmlcode"
            aria-hidden="true"
            :class="htmlClass"
            :title="htmlTitle"
            @click="clickToolbar('html')">
    </button>
    <!--help button-->
    <button type="button"
            v-if="toolbars.help"
            aria-hidden="true"
            style="font-size: 17px;padding: 5px 6px 5px 3px"
            :class="helpClass"
            :title="helpTitle"
            @click="clickToolbar('help')">
    </button>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
